<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局-垂直居中</title>
	<style type="text/css">
		/* 第一种 flex 
		  兼容性不太好
		*/
		.wapper {
			background: #000;

		}
		
	
		.wapper .box,.wapper .box1 {
			font-size: 15px;
			color: #fff;
		}
		
		.wapper .box_1 {
			font-size: 35px;
		}

		/* 100>11 */
		/* #box1 {
			color: #f00;
		} */
		
		/* 10+10 = 20 >11 */
		/* .wapper .box_1 {
			color: #f00;
		} */

		.box {
			border: 1px solid #f00;
			width: 90%;
			height: 200px;
		}
	</style>

</head>
<body>
	<div class="wapper">
		<div class="box">我是box</div>
		<div class="box1 box_1">我是box1</div>
	</div>
</body>
</html>